﻿@{
    ViewBag.Title = "StuDetails";
}
<br/>
<p><a href="~/Home/Index">主页</a>> <a href="~/Curricula/StuIndex">课程中心</a> >@ViewBag.CurriName</p>
<h2>课程中心</h2>
<div class="raw " style="margin-top:30px">
    <div class="col-md-12" id="stuDetail">

        <div class="layui-tab layui-tab-brief" lay-filter="stuTab">
            <div id="curDetail">
                <span style="font-size: 28px">@ViewBag.CurriName</span><br/>
                <span style="font-size: 20px">@ViewBag.ClassName</span><br/><br />
                <span class="layui-icon layui-icon-friends">同学 @ViewBag.InMembers</span><br/>
                <span>加课码：@ViewBag.Code</span>
            </div>
            <ul class="layui-tab-title" style="background: rgb(241, 243, 244);">
                <li class="layui-this" style="width: 10%">考试</li>
                <li style="width: 10%">通知</li>
                <li style="width: 10%">Null</li>
                <li style="width: 10%">Null</li>
            </ul>
            <div class="layui-tab-content layui-show " style="background: white">
                加载中...
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () { //首次加载页面0
        ReturnTag(0);
    });
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element', 'layer'],
        function () {
            var element = layui.element, layer = layui.layer;

            element.on('tab(stuTab)',
                function (ele) {
                    var a = ele.index;
                    ReturnTag(a);
                });
        });

    function ReturnTag(index) {
        const loadingGif = `<p style="text-align: center">
                <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 40px; color: lightgray">&#xe63e;</i>
            </p>`;
        $(".layui-tab-content").empty();
        $(".layui-tab-content").append(loadingGif);

        $.ajax({
            type: "POST",
            url: "/Curricula/ReturnStuDetailCard",
            data: { cardIndex: index },
            dataType: "HTML",
            success: function (data) {
                setTimeout(function() {
                    $(".layui-tab-content").empty();
                    $(".layui-tab-content").append(data);
                },200);
            }, error: function () {
                $(".layui-tab-content").empty();
                layer.msg("服务器连接失败");
            }
        });
    }
</script>